
<template>
  <!--<el-main>-->
  <!--<el-dialog title="订单发货" :visible.sync="dialogFormVisible">-->
  <!--<el-form :model="form" ref="form">-->
  <!--<el-form-item label="快递单号" :label-width="formLabelWidth">-->
  <!--<el-input v-model="form.CourierNumber" autocomplete="off"></el-input>-->
  <!--</el-form-item>-->
  <!--<el-form-item label="快递公司" :label-width="formLabelWidth" prop="CourierCompany">-->
  <!--<el-select v-model="form.CourierCompany" placeholder="请选择快递公司">-->
  <!--<el-option label="顺丰" value="顺丰"></el-option>-->
  <!--<el-option label="中通" value="中通"></el-option>-->
  <!--</el-select>-->
  <!--</el-form-item>-->
  <!--</el-form>-->
  <!--<div slot="footer" class="dialog-footer">-->
  <!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
  <!--<el-button type="primary" @click="fahuo">确认发货</el-button>-->

  <!--</div>-->
  <!--</el-dialog>-->
  <!--&lt;!&ndash;这是table的组件模块&ndash;&gt;-->
  <!--&lt;!&ndash;@handleSelectionChange="handleSelectionChange"&ndash;&gt;-->
  <!--&lt;!&ndash;<i-table :list="list"&ndash;&gt;-->
  <!--&lt;!&ndash;:options="options"&ndash;&gt;-->
  <!--&lt;!&ndash;:columns="columns"&ndash;&gt;-->
  <!--&lt;!&ndash;:operates="operates">&ndash;&gt;-->
  <!--&lt;!&ndash;<el-button slot="checkSlot" type="info" size="mini" @click="openorderModal(scope.$index, scope.row)">发货</el-button>&ndash;&gt;-->
  <!--&lt;!&ndash;<el-button slot="editSlot" type="primary" size="mini" @click="editClick">查看</el-button>&ndash;&gt;-->
  <!--&lt;!&ndash;<el-button slot="disableSlot" type="danger" size="mini" @click="delClick">删除</el-button>&ndash;&gt;-->
  <!--&lt;!&ndash;</i-table>&ndash;&gt;-->

  <!--&lt;!&ndash;<orderDetails></orderDetails>&ndash;&gt;-->

  <!--</el-main>-->
  <orderList></orderList>
  <!---->
</template>

<script>
  import iTable from '../TX/tableComponent'//引入table组件
  import orderList from '../CH/modal'
  import orderDetails from '../CH/orderDetails'


  export default {
    name: 'order',
    components: {
      iTable,
      orderList,
      orderDetails
    },
    //表格数据的操作方法
    data() {
      return {
        dialogFormVisible: false,

        // table数据传入
        list: [],

        // table 的参数
        options: {
          stripe: true, // 是否为斑马纹 table
          loading: false, // 是否添加表格loading加载动画
          highlightCurrentRow: true, // 是否支持当前行高亮显示
          mutiSelect: true, // 是否支持列表项选中功能
        },

        //table表头的添加与修改，需要展示的列
        columns: [
          {
            prop: 'order_id',
            label: '订单编号',
            align: 'center',
          },
          {
            prop: 'user_nickname',
            label: '收货人',
            align: 'center',
          },
          {
            prop: 'order_place_time',
            label: '交易时间',
            align: 'center',
          },
          {
            prop: 'order_pay_time',
            label: '付款时间',
            align: 'center',
          },

          {
            prop: 'order_deliver_time',
            label: '发货时间',
            align: 'center',
          },
          {
            prop: 'order_receive_time',
            label: '完成时间',
            align: 'center',
          },
          {
            prop: 'order_state',
            label: '状态',
            align: 'center',
            render: (h, params) => {
              for(let i=0;i<(this.list).length;i++){
                // console.log((this.list[i]).order_pay_time);
                if((this.list[i]).order_pay_time==null){
                  (this.list[i]).order_state=0
                }else if((this.list[i]).order_deliver_time==null){
                  (this.list[i]).order_state=1
                }else {
                  (this.list[i]).order_state=2
                }
              }
              return h('el-tag', {
                  props: {
                    type: params.row.order_state === 0 ? 'success' : params.row.order_state === 1 ? 'info' : 'danger'
                  } // 组件的props
                },
                params.row.order_state === 0 ? '待付款' : params.row.order_state === 1 ? '待发货' : '已发货')
            }
          }
        ],

        // 列操作按钮
        form: {
          CourierNumber: '',
          CourierCompany: '',
          num:''


        },
        formLabelWidth: '120px',
        operates: {
          width: 300,
          fixed: 'right',
          list: [
            {
              id: '0',//按钮id
              label: '发货',//按钮内容
              type: 'primary',//按钮样式
              show: true,//是否展示
              icon: 'el-icon-truck',//按钮内部图标
              plain: true,
              disabled: false,
              method: (index, row) => {
                this.handleEdit(index, row)
              }
            },
            //编辑按钮
            {
              id: '1',//按钮id
              label: '查看',//按钮内容
              type: 'info',//按钮样式
              show: true,//是否展示
              icon: 'el-icon-view',//按钮内部图标
              plain: true,
              disabled: false,
              method: (index, row) => {
                this.handleCheck(index, row)
              },

            },

            //删除按钮
            {
              id: '2',
              label: '删除',
              type: 'danger',
              icon: 'el-icon-delete',
              show: true,
              plain: false,
              disabled: false,
              method: (index, row) => {
                this.handleDel(index, row)
              }
            }
          ]
        }
      }
    },

    methods: {
      fahuo(){
        this.dialogFormVisible = false;
        this.$axiosx.get('/api/backAddData',{params:this.form,})
          .then((response) => {
            console.log(this.form);
            console.log('1111');
          });

      },
      /*这个为表格操作按钮的点击事件*//*!--！！！！！！！！！新增的*/
      openorderModal(index,row) {
        this.dialogFormVisible=true;
        console.log(index,row)

      },
      editClick () {
        console.log("点击到了按钮2")
      },
      delClick () {
        console.log("点击到了按钮3")
      },
      closeModal(){
        this.modalShow=false
      },


    },
    created(){
      this.$axiosx.get('/api/backGetorderlist')
        .then((response) => {
          console.log('1111');
          this.list = response.data;
          console.log(response.data);

        });
    }
  }
</script>

<style scoped lang="less">

</style>
